<template>
	<view class="content">
		<view class="content-top">
			<view style="padding: 30rpx 50rpx;color: #fff;">
				地址信息
			</view>
			<view class='cell-group' style="margin: 0 30rpx;border-radius: 20rpx;background: #202226;">
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>姓名<text>*</text></view>
					</view>
					<view class='cell-item-bd' style="width: 70%;">
						<input type="text" class='cell-bd-input' placeholder-style="color:#b9b9b9" color="#b9b9b9"
							placeholder='收货人姓名' v-model="name"></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>手机<text>*</text></view>
					</view>
					<view class='cell-item-bd' style="width: 70%;">
						<input type="number" class='cell-bd-input' placeholder-style="color:#b9b9b9" color="#b9b9b9"
							placeholder='收货人手机号码' v-model="mobile"></input>
					</view>
				</view>

				<view class='cell-item cell-item-mid right-img'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>地区<text>*</text></view>
					</view>

					<view class='cell-item-bd' style="justify-content: flex-end;flex: 1;">
						<text @tap="selectAddress" style="text-align: right;width: 100%;">{{pickerValue}}</text>

					</view>
					
				</view>
				<itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>详细地址<text>*</text></view>
					</view>
					<view class='cell-item-bd' style="width: 70%;">
						<input type="text" class='cell-bd-input' placeholder-style="color:#b9b9b9" color="#b9b9b9"
							placeholder='街道、楼牌号等' v-model="address"></input>
					</view>
				</view>
				<view class='cell-item' @click="defaultChange">
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>设为默认</view>
					</view>
					<view class='cell-item-ft'>
						<label class="radio">
							<radio value="1" :checked="checked" color="#F2D7AAFF" />
						</label>
					</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square btn-b" @click="saveShip" hover-class="btn-hover2" :disabled='submitStatus'
				style="width: 629rpx;height: 75rpx;background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);opacity: 1;border-radius: 10rpx;line-height: 75rpx;color: #000;"
				:loading='submitStatus' v-if="id===0">添加地址</button>
			<button class="btn btn-square btn-b" @click="saveShip" hover-class="btn-hover2" :disabled='submitStatus'
				style="width: 629rpx;height: 75rpx;background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);opacity: 1;border-radius: 10rpx;line-height: 75rpx;color: #000;"
				:loading='submitStatus' v-else>保存</button>
		</view>
	</view>

</template>

<script>
import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
	export default {
		components: {
			itmisterAddressPicker
		},
		data() {
			return {
				id: 0,
				name: '',
				mobile: '',
				region: ['北京市', '北京市', '东城区'],
				areaId: 110101,
				address: '',
				is_def: 2,
				multiArray: [
					[],
					[],
					[]
				],
				checked: false,
				pickerValue: '',
				defaultIndex: [0, 0, 0],
				submitStatus: false
			}
		},
		computed: {},
		methods: {
			// 省市区联动初始化
			selectAddress(){
			    this.$refs.addressEl.show();
			},
			// 确认选中
			confirmChange(address){
				console.log(address)
			    this.pickerValue = address.province + '/' + address.city + '/' + address.area;
				let data = {
					province_name: address.province,
					city_name: address.city,
					county_name: address.area
				}
				this.areaId = address.areaId
				/* this.$api.getAreaId(data, res => {
					if (res.status) {
						this.areaId = res.data
					} else {
						uni.showModal({
							title: '提示',
							content: '地区选择出现问题，请重新选择地区',
							showCancel: false
						});
					}
				}); */
			},
			// 信息验证
			checkData(data) {
				this.submitStatus = false;
				if (!data.name) {
					this.$common.errorToShow('请输入收货人姓名')
					return false
				} else if (!data.mobile) {
					this.$common.errorToShow('请输入收货人手机号')
					return false
				} else if (data.mobile.length !== 11) {
					this.$common.errorToShow('收货人手机号格式不正确')
					return false
				} else if (!data.area_id) {
					this.$common.errorToShow('请选择地区信息')
					return false
				} else if (!data.address) {
					this.$common.errorToShow('请输入收货地址详细信息')
					return false
				} else {
					return true
				}
			},
			//默认
			defaultChange() {
				if (this.checked) {
					this.checked = false;
					this.is_def = 2;
				} else {
					this.checked = true;
					this.is_def = 1;
				}
			},
			//编辑获取收货地址信息
			getShipInfo() {
				let data = {
					'id': this.id
				}
				this.$api.shipDetail(data, res => {
					if (res.status) {
						let region = res.data.area_name.split(" ");
						this.name = res.data.name;
						this.mobile = res.data.mobile;
						this.region = region;
						this.areaId = res.data.area_id;

						this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2]

						this.address = res.data.address;
						this.is_def = res.data.is_def;
						if (res.data.is_def == 1) {
							this.checked = true;
						} else {
							this.checked = false;
						}
					} else {
						this.$common.errorToShow('获取收货地址信息出现问题');
						// this.submitStatus = false;
					}
				}, res => {
					this.submitStatus = false;
				});
			},
			//删除地址
			delShip() {
				this.submitStatus = true;
				this.$api.removeShip({
					'id': this.id
				}, res => {
					if (res.status) {
						// console.log(res);
						let user_ship = this.$store.state.userShip;
						// console.log(user_ship);
						if (user_ship.id == this.id) {
							let data = {}
							this.$store.commit("userShip", data)
						}

						this.$common.successToShow(res.msg, ress => {
							// this.submitStatus = false;
							uni.navigateBack({
								delta: 1
							});
						});
					} else {
						this.$common.errorToShow(res.msg);
						// this.submitStatus = false;
					}
				}, res => {
					this.submitStatus = false;
				});
			},
			//存储收货地址
			saveShip() {
				this.submitStatus = true;
				let data = {
					name: this.name,
					address: this.address,
					mobile: this.mobile,
					is_def: this.is_def,
					area_id: this.areaId
				}

				if (this.id && this.id != 0) {
					//编辑存储
					data.id = this.id

					if (this.checkData(data)) {
						this.$api.editShip(data, res => {
							if (res.status) {
								this.$common.successToShow(res.msg, ress => {
									// this.submitStatus = false;
									uni.navigateBack({
										delta: 1
									});
								});
							} else {
								this.$common.errorToShow(res.msg);
								// this.submitStatus = false;
							}
						}, res => {
							this.submitStatus = false;
						});
					}
				} else {
					//添加
					if (this.checkData(data)) {
						this.$api.editShip(data, res => {
							if (res.status) {
								this.$common.successToShow(res.msg, ress => {
									// this.submitStatus = false;
									uni.navigateBack({
										delta: 1
									});
								});
							} else {
								this.$common.errorToShow(res.msg);
								// this.submitStatus = false;
							}
						}, res => {
							this.submitStatus = false;
						});
					}
				}
			}
		},
		onLoad(e) {
			if (e.ship_id) {
				//编辑
				this.id = e.ship_id;
				this.getShipInfo();
			} else {
				//添加
				this.pickerValue = '请选择省市区县、乡镇等'; //this.region[0]+ " "+ this.region[1]+" "+this.region[2];//关闭默认省市区
				uni.setNavigationBarTitle({
					title: '添加地址'
				});
			}
			
			//没有地区信息时，再拉一次
			if (!this.$db.get('areaList')) {
				//获取地区信息
				this.$api.getAreaList({}, res => {
					if (res.status) {
						this.$db.set('areaList', res.data)
					}
				});
			}
		},
		onBackPress() {
			
		},

	}
</script>

<style scoped lang="scss">
	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #fff;

		text {
			color: #f2d7aa;
		}
	}

	.cell-item-hd {
		width: 180rpx;
	}

	.cell-item-bd {
		color: #b9b9b9;
		font-size: 26upx;
		padding: 0;

		input {
			text-align: right;
		}

	}

	.button-bottom .btn {
		width: 50%;
		flex: none
	}

	.cell-bd-input {
		width: 100%;
	}

	.cell-item {
		padding: 30rpx 20rpx;
		background-color: transparent;
	}

	.right-img .cell-item-ft {
		right: 26rpx;
	}

	/* #ifdef MP-ALIPAY */
	input {
		font-size: 24upx;
	}

	/* #endif */
	.area-select {}
</style>